<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
</head>
<body>
<div id="app">
    <h1>单元测试</h1>
    <div>
        <el-table
                :data="tableData3"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="sectionTestId"
                    label="序号"
                    width="200"
            >
            </el-table-column>
            <el-table-column
                    prop="section.sectionName"
                    label="章节名称"
                    width="200"
            >
            </el-table-column>
            <el-table-column
                    prop="sectionTestState"
                    label="测验状态"
                    :formatter="checkState"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="sectionTestScore"
                    label="分数"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200"
            >
                <template slot-scope="scope">
                    <el-button type="primary" v-if="scope.row.sectionTestState == 1"
                               v-bind:disabled="scope.row.sectionTestState == 1 ">测验
                    </el-button>
                    <el-button type="primary" @click=gotoTest(scope.row) v-if="scope.row.sectionTestState == 0">测验
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            pageIndex: 1,
            total: 0,
            pageSize: 10,
            tableData3: []
        },
        created: function () {
            this.getSectionTestList();
        },
        methods: {
            handleSizeChange: function (val) {
            },
            handleCurrentChange: function (val) {
                this.pageIndex = val;
                this.listSectionTest();
            },
            gotoTest(row) {
                location.href='/sectionExamQuestion'
                // this.$router.push({name: '测验题目', path: "/SectionTestPaperList", params: {id: row.sectionTestId}})
            },
            checkState: function (row, column) {
                var state = row[column.property];
                if (state == 0) {
                    return "可测验";
                }
                if (state == 1) {
                    return "已测验";
                }
            },
            sectionTestPaper: function () {

                // this.$router.push({name: "试卷", path: '/listSectionTestPaper', params: {sectionId: row.sectionId}});
            },

            getSectionTestList: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/student/listSectionTest',
                    data: {pageIndex: this.pageIndex},
                    dataType: 'json',
                    success: function (res) {
                        _this.total = res.resData.total;
                        _this.pageSize = res.resData.pageSize;
                        _this.tableData3 = res.resData.list;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            }
        }
    })


</script>
</body>
</html>